<!-- 相机 -->
<template>
  <div class="camera">
    <van-nav-bar :title="title" @click-left="
      () => {
        this.$router.go(-1);
      }
    " left-arrow safe-area-inset-top></van-nav-bar>

    <!-- <video src="" class="video"></video> -->
    <div id="myvideo">
      <video style="width: 100%;height: 398px" :poster="img"></video>
    </div>
    <p style="margin-top:10px">
      视频回放
    </p>
    <van-row>
      {{list}}
    
    </van-row>
  </div>
</template>

<script>

import { cameraToken, cameraInfo, cameraVideo } from "../../api/camera";

export default {
  name: "",
  data() {
    return {
      title: "1号相机",
      img: require("../../assets/images/图0-3.png"),
      list: [],
    };
  },
  methods: {},
  computed: {},
  watch: {},
  methods: {
    async init() {
      let res = await cameraToken();
      console.log("res", res);
      if (res.status == 200) {
        var token = res.data;
        this.play(token);
      }

    },
    async getData() {
      var list = await cameraVideo({ code: this.$route.query.code });
      if (res.status == 200) {
        this.list = res.data;
      }
    },
    async play(token) {



      let res = await cameraInfo({ code: this.$route.query.code, userid: localStorage.getItem("userid") });

      if (res.status == 200) {
        $("#myvideo").html("");
        var keystr = res.data.keystr;
        var code = res.data.code;
        var url = "ezopen://" + keystr + "@open.ys7.com/" + code + "/1.live";

        this.player = new EZUIKit.EZUIKitPlayer({
          id: "myvideo", // 视频容器ID
          url: url, // ezopen播放地址逗号分隔
          autoplay: true,
          accessToken: token,
          decoderPath: '{{location path}}',
          width: 350, // 宽度高度为容器规格，将按照窗口数均分
          height: 250,

        })

      }


    }
  },
  created() {

    this.init()
    this.getData()

  },
  mounted() { },
  destroyed() {
    console.log("停止")
    this.player.stop();
    $("#myvideo").html("");
  },
};
</script>

<style lang="scss" scoped>
.camera {
  width: 100%;
  height: 100%;
  text-align: center;

  .video {
    width: 93%;
    background: #fff;
    margin-top: 20px;
    border-radius: 25px;
  }

  >p {
    margin-top: 20px;
    padding-left: 3.5%;
    text-align: left;
  }
}
</style>